<template>
  <div class="menu-wrapper">
    <template v-for="item in finalMenu">
      <el-menu-item v-if="validatenull(item[childrenKey]) && vaildRoles(item)"
                    :index="item[pathKey]"
                    @click="open(item)"
                    :key="item[labelKey]"
                    :class="{'is-active':vaildActive(item)}">
        <i :class="item[iconKey]"></i>
        <span slot="title"
              :alt="item[pathKey]">{{ generateTitle(item) }}</span>
      </el-menu-item>
      <el-submenu v-else-if="!validatenull(item[childrenKey])&&vaildRoles(item)"
                  :index="item[pathKey]"
                  :key="item[labelKey]">
        <template slot="title">
          <i :class="item[iconKey]"></i>
          <span slot="title"
                :class="{'el-menu--display':collapse && first}">{{ generateTitle(item) }}</span>
        </template>
        <template v-for="(child,cindex) in item[childrenKey]">
          <el-menu-item :index="child[pathKey],cindex"
                        @click="open(child)"
                        :class="{'is-active':vaildActive(child)}"
                        v-if="validatenull(child[childrenKey])"
                        :key="child[labelKey]">
            <i :class="child[iconKey]"></i>
            <span slot="title">{{ generateTitle(child) }}</span>
          </el-menu-item>
          <sidebar-item v-else
                        :menu="[child]"
                        :key="cindex"
                        :props="props"
                        :screen="screen"
                        :collapse="collapse"></sidebar-item>
        </template>
      </el-submenu>
    </template>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {isURL, validatenull} from "@/util/validate";
import {getDetail} from "@/api/business/offer";
import config from "./config.js";

export default {
  name: "sidebarItem",
  data() {
    return {
      config: config,
      finalMenu: [],
      offerInfo: null,
    };
  },
  props: {
    menu: {
      type: Array
    },
    screen: {
      type: Number
    },
    first: {
      type: Boolean,
      default: false
    },
    props: {
      type: Object,
      default: () => {
        return {};
      }
    },
    collapse: {
      type: Boolean
    }
  },
  watch: {
    offer: {
      deep: true,
      handler(val, old) {
        if (val === old) {
          return
        } else if(val == null || val == '') {
          return;
        }
        this.refreshFinalMenu();
      }
    },
    menu: {
      deep: true,
      handler(val, old) {
        if (val == null || val === old) {
          return
        }
        this.refreshFinalMenu();
      }
    }

  },
  created() {
    this.refreshFinalMenu();
  },
  mounted() {
  },
  computed: {
    ...mapGetters(["roles","oc","offer","userInfo"]),
    labelKey() {
      return this.props.label || this.config.propsDefault.label;
    },
    pathKey() {
      return this.props.path || this.config.propsDefault.path;
    },
    iconKey() {
      return this.props.icon || this.config.propsDefault.icon;
    },
    childrenKey() {
      return this.props.children || this.config.propsDefault.children;
    },
    isOpenKey() {
      return this.props.isOpen || this.config.propsDefault.isOpen;
    },
    nowTagValue() {
      return this.$router.$avueRouter.getValue(this.$route);
    }
  },
  methods: {
    refreshFinalMenu() {
      if(this.userInfo.is_agency == 0 && this.oc && this.offer != null && this.offer != '') {
        getDetail(this.offer).then(res => {
          this.offerInfo = res.data.data;
          if(this.offerInfo.isShared) {
            this.finalMenu = this.getFinalMenu(this.menu,['/offer/creativerequest','/offer/origincreative','/offer/creativeconfirm']);
          } else {
            this.finalMenu = this.menu;
          }
        }).catch(()=>{
          this.finalMenu = this.menu;
        });
      } else {
        this.finalMenu = this.menu;
      }
    },
    getFinalMenu(menu,excludePathList) {
      if(menu == null || menu.length == 0) {
        return menu;
      }
      let resultMenu = [];
      menu.forEach((item)=>{
        if(!excludePathList.includes(item.path)) {
          let newItem = Object.assign({},item);
          newItem.children = this.getFinalMenu(item.children,excludePathList);
          resultMenu.push(newItem);
        }
      });
      return resultMenu;
    },
    generateTitle(item) {
      return this.$router.$avueRouter.generateTitle(
        item[this.labelKey],
        (item.meta || {}).i18n
      );
    },
    vaildActive(item) {
      if (this.validIsOpen(item)) {
        return false;
      }
      const groupFlag = (item["group"] || []).some(ele =>
        this.$route.path.includes(ele)
      );
      return this.nowTagValue === item[this.pathKey] || groupFlag;
    },
    vaildRoles(item) {
      item.meta = item.meta || {};
      return item.meta.roles ? item.meta.roles.includes(this.roles) : true;
    },
    validatenull(val) {
      return validatenull(val);
    },
    validIsOpen(item) {
      if (item[this.isOpenKey] === 2 && isURL(item[this.pathKey])) {
        return true;
      }
    },
    open(item) {
      if (this.screen <= 1) this.$store.commit("SET_COLLAPSE");
      if (this.validIsOpen(item)) {
        window.open(item[this.pathKey]);
      } else {
        this.$router.$avueRouter.group = item.group;
        this.$router.$avueRouter.meta = item.meta;
        this.$router.push({
          path: this.$router.$avueRouter.getPath({
            name: item[this.labelKey],
            src: item[this.pathKey]
          }, item.meta),
          query: item.query
        });
      }
    }
  }
};
</script>

